<template>
  <div class="luckDraw_box">
    <el-steps :active="active" finish-status="success" simple class="activity_simple_step">
      <el-step title="1. 创建活动"></el-step>
      <el-step title="2. 奖项设置"></el-step>
    </el-steps>
    <div class="lottery">
      <img style="width: 360px; height: 685px;" src="../../../assets/images/lucky-draw.png" />
        <!-- 第一步 -->
      <div class="formdata" v-if="active == 1">
        <div class="setup big_title_style">基本设置</div>
        <el-form :model="form" ref="rules" label-width="100px" :rules="rules">
          <el-form-item label="活动名称" prop="lotteryTitle">
            <el-input v-model="form.lotteryTitle" clearable placeholder="请输入活动名称" :disabled="true" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="活动时间" prop="lotteryStarttime">
            <el-date-picker v-model="timeValue" type="datetimerange" range-separator="至" start-placeholder="开始日期" style="width: 400px"
              end-placeholder="结束日期" @change="getSTime" :disabled="true">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动类型" prop="lotteryLimit" style="color: #606266">
            抽奖次数 <el-input v-model="form.lotteryLimit" oninput="value=value.replace(/[^\d]/g,'')" :disabled="true"
              style="margin-right: 10px; width: 70px"></el-input>，积分抽奖，消耗<el-input v-model="form.lotteryFate" :disabled="true"
              oninput="value=value.replace(/[^\d]/g,'')" style="margin: 0 10px; width: 70px"></el-input>积分
          </el-form-item>
          <el-form-item label="抽奖周期" >
            <el-radio style="margin-top: 12px" v-model="form.checkNum" label="0" :disabled="true">无限制</el-radio>
            <el-radio style="margin-top: 15px" v-model="form.checkNum" label="1" :disabled="true">每天 {{form.lotteryLimit || 'n'}} 次
            </el-radio>
          </el-form-item>
          <el-form-item label="中奖名单">
            <el-radio style="margin-top: 12px" v-model="form.lotteryShow" label="0" :disabled="true">展示</el-radio>
            <el-radio style="margin-top: 15px" v-model="form.lotteryShow" label="1" :disabled="true">不展示
            </el-radio>
          </el-form-item>
          <!-- <el-form-item label="活动封面图" prop="lotteryImg">
            <imageUpload v-model="form.lotteryImg"  :disabled="true"/>
          </el-form-item>
          <el-form-item label="活动描述图" prop="lotteryRemarkImg">
            <imageUpload v-model="form.lotteryRemarkImg"  :disabled="true"/>
          </el-form-item> -->
          <el-form-item label="活动说明">
            <el-input type="textarea" placeholder="请输入内容" v-model="form.lotteryText" maxlength="30" show-word-limit style="width: 400px" :disabled="true">
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <!-- 第二步 -->
      <div class="formdata" v-if="active == 2">
        <div class="setup big_title_style">奖品设置</div>
        <!-- <a @click="prizeDataclick" style="color: #155bd4; font-size: 14px; padding: 20px 0" :disabled="true">添加奖品</a> -->
        <div style="margin-top: 10px">
          <el-table border class="inputcolumn" :data="detailList">
            <el-table-column prop="prizeUrl" label="图片" align="center">
              <template slot-scope="scope">
                <el-image v-if="scope.row.prizeUrl != null && scope.row.prizeUrl != ''" slot="reference"
                  :src="scope.row.prizeUrl" class="image-rows" :preview-src-list="[scope.row.prizeUrl]">
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="prizeName" label="名称" align="center">
            </el-table-column>
            <el-table-column prop="prizeTypeStr" label="奖品" align="center"></el-table-column>
            <el-table-column prop="prizeAmount" label="数量" align="center"></el-table-column>
            <el-table-column prop="prizeProbability" label="中奖概率" align="center"></el-table-column>
            <el-table-column align="center" prop="receiveNumber" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="handleDeleteser(scope.$index, scope.row)" :disabled="true">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 添加奖品界面 -->
        <el-dialog width="40%" title="添加奖品" :visible.sync="innerVisible" append-to-body>
          <el-form :model="prizeData" ref="rulesTwo" label-width="100px" :rules="rulesTwo">
            <el-form-item label="奖品图片">
              <!-- <imageUpload v-model="prizeData.prizeUrl" /> -->
              <imageArraySize :imageStr.sync="prizeData.prizeUrl" :size="500"
                :key="prizeData.prizeUrl" :msg="'图片要求：尺寸100*100，大小500KB以内。'" :limit="1" ref="childssp">
              </imageArraySize>
            </el-form-item>
            <el-form-item label="奖品名称" prop="prizeName">
              <el-input v-model="prizeData.prizeName" clearable placeholder="请输入奖品名称" :disabled="true" ></el-input>
            </el-form-item>
            <el-form-item label="奖品类型" required>
              <el-radio @change="changeType(prizeData.checkType)" v-model="prizeData.checkType" label="0" :disabled="true">优惠券
                <el-select :disabled="prizeData.checkType != '0' " style="margin: 0 10px" v-model="couponName" placeholder="请选择">
                  <el-option v-for="item in listCoupon" :key="item.couponUid" :label="item.couponName"
                    :value="item.couponName" @click.native="
                      handleCoupon(item.couponName, item.couponUid, item.stock)
                    ">
                  </el-option>
                </el-select>
                <span v-if="stock != ''">可用库存{{ stock }}份</span>
              </el-radio>

              <el-radio @change="changeType(prizeData.checkType)" style="margin-top: 15px" v-model="prizeData.checkType" :disabled="true"
                label="1">积分<el-input :disabled="prizeData.checkType != '1' " v-model="prizeData.score"
                  oninput="value=value.replace(/[^\d]/g,'')" style="margin: 0 30px; width: 70px" ></el-input>积分
              </el-radio>

              <el-radio @change="changeType(prizeData.checkType)" style="margin-top: 15px" v-model="prizeData.checkType" label="2" :disabled="true">赠品
                <el-select :disabled="prizeData.checkType != '2' " style="margin: 0 25px" v-model="giftName" placeholder="请选择">
                  <el-option v-for="item in listGift" :key="item.giftUid" :label="item.giftName" :value="item.giftName"
                    @click.native="handleGift(item.giftName, item.giftUid)">
                  </el-option>
                </el-select>
              </el-radio>
            </el-form-item>

            <el-form-item label="奖品数量" prop="prizeAmount">
              <el-input v-model="prizeData.prizeAmount" oninput="value=value.replace(/[^\d]/g,'')" :disabled="true"
                style="margin: 0 10px; width: 70px"></el-input>份
            </el-form-item>
            <el-form-item label="中奖概率" prop="prizeProbability">
              <el-input v-model="prizeData.prizeProbability" oninput="value=value.replace(/[^\d]/g,'')" :disabled="true"
                style="margin: 0 10px; width: 70px"></el-input>%
            </el-form-item>
            <el-form-item label="奖品库存" prop="prizeNumber">
              <el-input v-model="prizeData.prizeNumber" oninput="value=value.replace(/[^\d]/g,'')" :disabled="true"
                style="margin: 0 10px; width: 70px"></el-input>
            </el-form-item>
            <div style="width: 100%; text-align: center">
              <el-button style="margin-top: 12px" @click="cancel">取消</el-button>
              <el-button style="margin-top: 12px; background: #155bd4; color: #fff" @click="prizeDetermine" :disabled="true">确定
              </el-button>
            </div>
          </el-form>
        </el-dialog>

        <div class="setup big_title_style" style="margin-top: 30px">
          未中奖设置
        </div>
        <el-form :model="Noprize" ref="rulesThree" style="margin-top: 20px" :rules="rulesThree">
          <el-form-item label="名称" prop="prizeName" style="margin-left: 12px">
            <el-input v-model="Noprize.prizeName" placeholder="请输入名称" :disabled="true" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="图片" style="margin-left: 24px">
            <!-- <imageUpload v-model="Noprize.prizeUrl" :disabled="true"/> -->
            <div style="margin-left: 40px">
            <imageArraySize :imageStr.sync="Noprize.prizeUrl" :size="500"
              :key="Noprize.prizeUrl" :msg="'图片要求：尺寸100*100，大小500KB以内。'" :limit="1" ref="childss">
            </imageArraySize>
            </div>
          </el-form-item>
          <el-form-item label="提示语" prop="remark">
            <el-input v-model="Noprize.remark" placeholder="请输入提示语" :disabled="true" style="width: 400px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <el-button style="margin-top: 12px" @click="next" v-if="active == 1" type="primary">下一步</el-button>
        <el-button style="margin-top: 12px" @click="pre" v-if="active == 2" type="primary">上一步</el-button>
        <!-- <el-button style="margin-top: 12px; background: #155bd4; color: #fff" @click="Submit" v-if="active == 2" :disabled="true">提交
        </el-button> -->
        <el-button style="margin-top: 12px" @click="close" >取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    listLottery,
    getLottery,
    delLottery,
    addLottery,
    updateLottery,
    updateStatus
  } from "@/api/activity/lottery";
  import {
    listCoupon
  } from "@/api/activity/coupon";
  import {
    listGift
  } from "@/api/activity/gift";
  // import ImageUpload from "@/components/ImageUpload";
  import imageArraySize from "@/components/ImageUpload/imageArraySize";
  export default {
    components: {
      imageArraySize,
    },
    data() {
      return {
        stock: "",
        flag: true,
        listGift: null,
        couponName: null,
        giftName: null,
        GiftName: null,
        listCoupon: null,
        innerVisible: false,
        timeValue: [],
        active: 1,
        detailList: [],
        prizeData: {
          checkType: "0",
        },
        Noprize: {},
        form: {
          lotteryUid: null,
          checkNum: "0",
          lotteryShow: "0",
          checkType: "0",
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          couponName: null,
          couponType: null,
          dataStatus: null,
        },
        // 查询参数
        queryParamtow: {
          pageNum: 1,
          pageSize: 10,
          giftName: null,
          dataStatus: null,
        },
        rules: {
          lotteryTitle: [{
            required: true,
            message: "不能为空",
            trigger: "blur",
          }],
          lotteryImg: [{
            required: true,
            message: "不能为空",
            trigger: "change",
          }],
          lotteryLimit: [{
            required: true,
            message: "不能为空",
            trigger: "blur",
          }],
          lotteryStarttime: [{
            required: true,
            message: "不能为空",
            trigger: "blur",
          }],
          lotteryRemarkImg: [{
            required: true,
            message: "不能为空",
            trigger: "change",
          }],
        },
        rulesTwo: {
          prizeName: [{
            required: true,
            message: "不能为空",
            trigger: "blur",
          }],
          prizeAmount: [{
            required: true,
            message: "不能为空",
            trigger: "blur",
          }],
          prizeProbability: [{
            required: true,
            message: "不能为空",
            trigger: "blur",
          }],
          prizeNumber: [{
            required: true,
            message: "不能为空",
            trigger: "blur",
          }],
        },
        rulesThree: {
          prizeName: [{
            required: true,
            message: "不能为空",
            trigger: "blur",
          }],
          remark: [{
            required: true,
            message: "不能为空",
            trigger: "blur",
          }],
        },
      };
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        const lotteryUid = this.$route.params && this.$route.params.lotteryUid;
        if (lotteryUid) {
          getLottery(lotteryUid).then(response => {
            this.form = response.data;
            this.timeValue.push(this.form.lotteryStarttime);
            this.timeValue.push(this.form.lotteryEndtime);

            const prizeList = this.form.detailList;
            prizeList.forEach((item, index) => {
              if (item.prizeType == "thanks") {
                this.Noprize = item;
              }else{
                this.detailList.push(item);
              }
            })
            console.log(this.detailList);
          });
        }
      },
      changeType(checkType) {
        if (checkType == 0) {
          this.prizeData.prizeTypeStr = "优惠券";
          this.prizeData.prizeType = "coupon";
          this.prizeData.score = "";
          this.giftName = "";
        } else if (checkType == 1) {
          this.prizeData.prizeTypeStr = "积分";
          this.prizeData.prizeType = "score";
          this.couponName = "";
          this.prizeData.couponName = "";
          this.stock = "";
          this.prizeData.stock = "";
          this.giftName = "";
        } else if (checkType == 2) {
          this.prizeData.prizeTypeStr = "赠品";
          this.prizeData.prizeType = "gift";
          this.prizeData.score = "";
          this.stock = "";
          this.prizeData.stock = "";
        }
      },
      //删除奖品
      handleDeleteser(val, row) {
        // 模态框删除按钮
        this.$confirm("是否确认删除本条数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        }).then(() => {
          this.detailList.splice(val, 1);
        });
      },
      //选择优惠券
      handleCoupon(couponName, couponUid, stock) {
        this.prizeData.couponName = couponName;
        this.prizeData.objUid = couponUid;
        this.stock = stock;
        this.prizeData.stock = stock;
        this.prizeData.prizeTypeStr = "优惠券";
        this.prizeData.prizeType = "coupon";
      },
      //选择赠品
      handleGift(giftName,giftUid) {
        this.prizeData.couponName = giftName;
        this.prizeData.objUid = giftUid;
        this.giftName = giftName;
      },
      //添加奖品界面
      prizeDataclick() {
        this.innerVisible = true;
        listCoupon(this.queryParams).then((response) => {
          this.listCoupon = response.rows;
        });
        listGift(this.queryParamtow).then((response) => {
          this.listGift = response.rows;
        });
      },
      cancel() {
        this.prizeData = {};
        this.innerVisible = false;
      },
      //确定添加奖品
      prizeDetermine() {
        this.$refs["rulesTwo"].validate(valid => {
          if (valid) {
            this.detailList.push(this.prizeData);
            this.prizeData = {};
            this.innerVisible = false;
          }
        })

      },
      Submit() {
        //图片上传组件需要定义
        this.$refs.childss.selectImgs();
        //判断中奖概率是否大于100%
        let rate = 0;
        this.detailList.forEach((item, index) => {
          rate += parseInt(item.prizeProbability);
        })
        if (rate && rate > 100) {
          return alert("中奖概率合计不能大于100%")
        }

        this.$set(this.Noprize, "prizeType", 'thanks');
        this.$set(this.Noprize, "prize", '谢谢惠顾');
        this.$set(this.Noprize, "prizeProbability",parseInt(100-rate));
        if (this.Noprize.prizeName && this.flag) {
          this.flag = false;
          this.detailList.push(this.Noprize);
        }
        this.$set(this.form, "detailList", this.detailList);
        console.log(this.form)

        if (this.form.checkNum == '0') {
          this.form.lotteryFrequency = "all";
        } else {
          this.form.lotteryFrequency = "day";
        }

        this.$refs["rulesThree"].validate(valid => {
          if (valid) {
            const lotteryUid = this.$route.params && this.$route.params.lotteryUid;
            if (lotteryUid) {
              updateLottery(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.close();
                // this.$router.go(-1);
              });
            } else {
              addLottery(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.close();
                // this.$router.go(-1);
              });
            }
          }
        });

      },
      p(s) {
        return s < 10 ? "0" + s : s;
      },
      getSTime(val) {
        const d = new Date(val[0]);
        const resDate =
          d.getFullYear() +
          "-" +
          this.p(d.getMonth() + 1) +
          "-" +
          this.p(d.getDate());
        const resTime =
          this.p(d.getHours()) +
          ":" +
          this.p(d.getMinutes()) +
          ":" +
          this.p(d.getSeconds());
        this.form.lotteryStarttime = resDate + " " + resTime;
        const c = new Date(val[1]);
        const resDatec =
          c.getFullYear() +
          "-" +
          this.p(c.getMonth() + 1) +
          "-" +
          this.p(c.getDate());
        const resTimec =
          this.p(c.getHours()) +
          ":" +
          this.p(c.getMinutes()) +
          ":" +
          this.p(c.getSeconds());
        this.form.lotteryEndtime = resDatec + " " + resTimec;
      },
      next() {
        this.$refs["rules"].validate(valid => {
          if (valid) {
            this.active = 2;
          }
        })

      },
      pre() {
        this.active = 1;
      },
      close() {
        //关闭
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({
          path: "/activity/lottery",
          query: {
            t: Date.now()
          }
        });

        //返回
        // this.$router.go(-1);
      }
    },
  };
</script>
<style lang="less" scoped>
  .luckDraw_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .activity_simple_step {
    padding: 24px 8%;
    background-color: #FFF;
    box-shadow: 0px 5px 10px 0px rgba(27, 46, 107, 0.06);
    position: relative;
    z-index: 99;
    border-top: 1px solid #eee;
  }

  .el-input {
    width: 240px;
  }

  /deep/ .el-radio {
    display: block;
    white-space: normal;
    margin-right: 0;
  }

  /deep/ .el-upload--picture-card {
    width: 60px;
    height: 60px;
  }

  /deep/ .el-upload {
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin-top: 10px;
  }

  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 60px;
    height: 60px;
    line-height: 60px;
  }

  /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 60px;
    height: 60px;
    line-height: 60px;
  }

  /deep/ .avatar {
    width: 60px;
    height: 60px;
  }

  .lottery {
    flex: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding-top: 30px;
    width: 100%;

    .formdata {
      width: 640px;
      height: 100%;
      overflow-y: auto;
      margin-left: 100px;
      background-color: #FFF;
      padding: 20px 20px 68px 20px;
      border-radius: 10px;
      border: 1px solid #eee;

      .setup {
        border-bottom: 1px solid #ebedf0;
        font-size: 18px;
        padding-bottom: 8px;
        margin-bottom: 24px;
      }

      .setups {
        border-bottom: 1px solid #ebedf0;
        font-size: 18px;
        padding-bottom: 8px;
        margin-bottom: 10px;
      }
    }

    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      padding-left: 120px;
      width: 100%;
      height: 68px;
      z-index: 10;;
      box-shadow: 0 -2px 8px rgb(200 201 204 / 20%);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
